{% liquid
  case desktop_columns_per_row
    when '5'
      assign desktop_columns_per_row = 'row-cols-lg-5'
    when '6'
      assign desktop_columns_per_row = 'row-cols-lg-6'
  endcase
%}
{%- comment -%} 提醒：一级导航栏内有三级导导航栏，不代表一级导航栏内的所有二级导航栏有三级导航栏 {%- endcomment -%}

{% comment %}配置图片链接与二级导航栏有相同{% endcomment %}
{% if has_matched_secondmenu_link %}
  {%- comment -%}（一级导航栏）有三级导航 文本模式 {%- endcomment -%}
  {% if link.levels >= 2 %}
    {%- assign submenu = link.links -%}
    <div aria-labelledby="dropdownMenuLink{{ forloop.index }}" class="9090 as-dropdown-menu border-0 py-0 dropdown-menu {{ background_color }} overflow-hidden dropdown-menu-center" style="left: {% if if_first and is_desktop_logo_top_left %}0 {%else%}1.25rem{%endif%};">
      <ul class="second-menu-wrapper-only-text">
        {% for sublink in submenu %}
          {% comment %}（二级导航栏）内没三级，紧遍历二导航栏标题{% endcomment %}
          {% if sublink.levels == 0 %}
          <li>
            <a {% render 'link', link: sublink.url %} class="dropdown-item" href="{{ sublink.url }}" >{{ sublink.title }}</a>
          </li>
          {% comment %}（二级导航栏）内有三级，遍历二、三级导航栏标题{% endcomment %}
          {% elsif sublink.levels >= 1 %}
          <li>
            <div class="as-sub-dropdown sub-dropdown sub-nav-item{% if forloop.first == true %} sub-dropdown-of-first{% endif %}">
              <a class="dropdown-item as-sub-nav-link sub-nav-link sub-dropdown-toggle d-flex cursor-pointer">
                <span class="sub-dropdown-text flex-grow-1">{{ sublink.title }}</span>
                <span class="sub-dropdown-icon float-end align-self-center">{% render 'icon-chevron-down-header' %}</span>             
              </a>
              <ul class="as-sub-dropdown-menu sub-dropdown-menu hide-sub-dropdown-menu third-menu-wrapper-only-text">
                {% comment %}遍历三级级导航栏标题{% endcomment %}
                {% for thirdmenu in sublink.links %}
                  <li><a {% render 'link', link: thirdmenu.url %} class="sub-dropdown-item" href="{{ thirdmenu.url }}" >{{ thirdmenu.title }}</a></li>
                {% endfor %}
              </ul>
            </div>
          </li>
          {% endif %}
        {% endfor %}
      </ul>
    </div>
  {%- comment -%}（一级导航栏）没三级导航 {%- endcomment -%}
  {% else %}
    {%- comment -%} 配置了二级图片 mega-menu模式{%- endcomment -%}
    {% if has_matched_img %}
      {%- assign submenu = link.links -%}
      <div aria-labelledby="dropdownMenuLink{{ forloop.index }}" class="55555555 as-dropdown-menu mega-menu-dropdown border-0 py-0 dropdown-menu {{ background_color }} overflow-hidden dropdown-menu-center end-0 start-0">
        <div class="container site-header-container pic-list">
          {% comment %}遍历二级导航栏标题 配置的图片 配置的文案{% endcomment %}
          <div class="as-sub-dropdown py-lg-5 pb-3 {% if forloop.first == true %} sub-dropdown-of-first{% endif %}">
            <div class="second-menu-item">
              {% comment %} third-menu-wrapper {% endcomment %}
              <div class="as-sub-dropdown-menu d-flex justify-content-lg-center gy-lg-4 gy-2 hide-sub-dropdown-menu row {{ desktop_columns_per_row }} gx-lg-4 gx-2 row-cols-2 text-center flex-wrap">
                {% for sublink in submenu %}
                  {% comment %}判断当前二级菜单的链接是否与在主题配置的链接有相同的{% endcomment %}
                  {% liquid 
                    assign blocks = section.blocks | where: "type", "mega_menu" | map: "settings" 
                    assign is_mega_nenu = false 
                    for block in blocks
                      if sublink.url == block.link
                        assign is_mega_nenu = true
                        assign second_img = block.img
                        assign second_img_string = second_img | remove: '/' 
                        assign second_img_string = second_img_string | remove: '.'
                        assign second_desp = block.text
                        assign sublin1 = block.link
                        break
                      endif

                       assign firstCharacter = sublink.title | slice: 0, 1
                       assign lastCharacter = sublink.title | slice: -1, 1
                       assign isSignLink = true
                       if firstCharacter == '#' and lastCharacter == '#'
                         assign isSignLink = false
                       endif 
                    endfor
                  %}
                  {% if isSignLink != false %}
                    <div class="mega-dropdown-column third-menu-item">
                      <div class="position-relative {% if section.settings.adapt_to_image_size == false %} h-100{% endif %}">
                        <a {% render 'link', link: sublink.url %} class="text-decoration-none stretched-link third-menu-link" href="{{ sublink.url }}"></a>
                        <figure class="mb-0" style="background-color: {{ menu_background }};">
                          {% comment %}主题配置中配置的图片链接与二级导航栏链接相同，显示对应图片{% endcomment %}
                          {% if is_mega_nenu %}
                            {%- if second_img != blank -%}
                              {%- style -%}
                                  .adapt-to-image-{{second_img_string}}:before {
                                    padding-top: {{ 1 | divided_by: second_img.aspect_ratio | times: 100 }}%;
                                    content: '';
                                    display: block;
                                  }
                                {%- endstyle -%}
                              {%- endif -%}
                              {% if second_img != blank %}
                              <div class="ratio{% if section.settings.adapt_to_image_size %} adapt-to-image-{{second_img_string}}{% else %} ratio-16x9{% endif %}">
                                <img width="auto" height="auto" loading="lazy" class="h-100 w-100 object-fit-cover img-fluid" src="{{ second_img | img_url: 'master' }}" alt="{{ second_img.alt }}">
                              </div>  
                            {% else %}
                              <div class="ratio ratio-16x9">
                                {{ 'collection-1' | placeholder_svg_tag: 'placeholder-svg h-100 w-100' }}
                              </div>
                            {% endif %}
                          {% comment %}主题配置中配置的图片链接与二级导航栏链接不相同 或 没配置图片链接，显示占位符{% endcomment %}
                          {% else %}
                            <div class="ratio ratio-16x9">
                              {{ 'collection-1' | placeholder_svg_tag: 'placeholder-svg h-100 w-100' }}
                            </div>
                          {% endif %}
                        </figure>
                        <div class="third-menu-text pt-3 small">
                          <div class="third-menu-title">{{ sublink.title }}</div>
                          {% if is_mega_nenu %}
                            <div class="third-menu-desp">{{ second_desp }}</div>
                          {% endif %}
                        </div>
                      </div>
                    </div>
                  {% endif %}
                {% endfor %}
              </div>
            </div>
          </div>
        </div>
        {% render 'header-view-all-btn' submenu: submenu %}
      </div>
    {%- comment -%} 未配置二级图片  文本模式 {%- endcomment -%}
    {% else %}
      {%- assign submenu = link.links -%}
      <div aria-labelledby="dropdownMenuLink{{ forloop.index }}" class="as-dropdown-menu border-0 py-0 dropdown-menu {{ background_color }} overflow-hidden dropdown-menu-center" style="left: {% if if_first and is_desktop_logo_top_left %}0 {%else%}1.25rem{%endif%};">
        <ul class="second-menu-wrapper-only-text">
          {% for sublink in submenu %}
            {% comment %}（二级导航栏）内没三级，遍历二导航栏标题{% endcomment %}
            {% if sublink.levels == 0 %}
              <li>
                <a {% render 'link', link: sublink.url %} class="dropdown-item" href="{{ sublink.url }}" >{{ sublink.title }}</a>
              </li>
            {% comment %}二级导航栏内有三级，遍历二、三级导航栏标题{% endcomment %}
            {% elsif sublink.levels >= 1 %}
              <li>
                <div class="as-sub-dropdown sub-dropdown sub-nav-item{% if forloop.first == true %} sub-dropdown-of-first{% endif %}">
                  <a class="dropdown-item as-sub-nav-link sub-nav-link sub-dropdown-toggle d-flex cursor-pointer">
                    <span class="sub-dropdown-text flex-grow-1">{{ sublink.title }}</span>
                    <span class="sub-dropdown-icon float-end align-self-center">{% render 'icon-chevron-down-header' %}</span>             
                  </a>
                  <ul class="as-sub-dropdown-menu sub-dropdown-menu hide-sub-dropdown-menu third-menu-wrapper-only-text">
                    {% comment %}遍历三级级导航栏标题{% endcomment %}
                    {% for thirdmenu in sublink.links %}
                      <li><a {% render 'link', link: thirdmenu.url %} class="sub-dropdown-item" href="{{ thirdmenu.url }}" >{{ thirdmenu.title }}</a></li>
                    {% endfor %}
                  </ul>
                </div>
              </li>
            {% endif %}
          {% endfor %}
        </ul>
      </div>
    {% endif %}
    
  {% endif %}

{% comment %}没配置图片链接或配置的图片链接与二级导航栏不相同{% endcomment %}
{% else %}
  {%- comment -%} （一级导航栏）有三级导航  {%- endcomment -%}
  {% if link.levels >= 2 %}
    {% comment %}配置图片链接与三级级导航栏有相同{% endcomment %}
    {% if has_matched_thirdmenu_link %}
      {%- comment -%} 配置了三级图片 mega-menu模式 {%- endcomment -%}
      {% if has_matched_img %}
        {%- assign submenu = link.links -%}
        <div aria-labelledby="dropdownMenuLink{{ forloop.index }}" class="as-dropdown-menu mega-menu-dropdown border-0 py-0 dropdown-menu {{ background_color }} overflow-hidden dropdown-menu-center end-0 start-0">
          <div class="999988888 container site-header-container second-menu-wrapper">
            
          {% for sublink in submenu %}
            {% comment %}（二级导航栏）内没三级，紧遍历二级导航栏标题{% endcomment %}
            {% if sublink.levels == 0 %}
              <div class="second-menu-item">
                <div class="second-menu-title">
                  <a {% render 'link', link: sublink.url %} class="text-decoration-none" href="{{ sublink.url }}" >{{ sublink.title }}</a>
                </div>
              </div>
            {% comment %}（二级导航栏）内有三级，遍历二级导航栏标题 三级导航栏标题 配置的图片 配置的文案{% endcomment %}
            {% elsif sublink.levels >= 1 %}
              <div class="000000000 as-sub-dropdown{% if forloop.first == true %} sub-dropdown-of-first{% endif %}">
                <div class="second-menu-item">
                  <div class="second-menu-title as-sub-nav-link sub-nav-link sub-dropdown-toggle d-flex">
                    <span class="flex-grow-1">{{ sublink.title }}</span>
                    <span class="sub-dropdown-icon float-end d-lg-none align-items-center">{% render 'icon-chevron-down-header' %}</span>
                  </div>
                  <div class="as-sub-dropdown-menu hide-sub-dropdown-menu row gy-lg-4 {{ desktop_columns_per_row }} text-center flex-lg-wrap flex-nowrap third-menu-wrapper">
                    {% for third_link in sublink.links %}
                      {% comment %}判断二级菜单当前的三级菜单的链接是否与在主题配置的链接有相同的{% endcomment %}
                      {% liquid 
                        assign hhh = section.blocks | where: "type", "mega_menu"
                        assign blocks = section.blocks | where: "type", "mega_menu" | map: "settings" 
                        assign is_mega_nenu = false 
                        for block in blocks
                          if third_link.url == block.link
                            assign is_mega_nenu = true
                            assign third_img = block.img
                            assign third_img_string = third_img | remove: '/' 
                            assign third_img_string = third_img_string | remove: '.'
                            assign third_desp = block.text
                            assign third_link1 = block.link
                            break
                          endif
                        endfor
                      %}
                      
                      <div class="mega-dropdown-column third-menu-item">
                        <div class="position-relative {% if section.settings.adapt_to_image_size == false %} h-100{% endif %}">
                          <a {% render 'link', link: third_link.url %} class="text-decoration-none stretched-link third-menu-link" href="{{ third_link.url }}"></a>
                          <figure class="mb-0" style="background-color: {{ menu_background }};">
                            {% comment %}主题配置中配置的图片链接与三级导航栏链接相同，显示对应图片{% endcomment %}
                            {% if is_mega_nenu %}
                              {%- if third_img != blank -%}
                              {%- style -%}
                                  .adapt-to-image-{{third_img_string}}:before {
                                    padding-top: {{ 1 | divided_by: third_img.aspect_ratio | times: 100 }}%;
                                    content: '';
                                    display: block;
                                  }
                                {%- endstyle -%}
                              {%- endif -%}
                              {% if third_img != blank %}
                              <div class="ratio{% if section.settings.adapt_to_image_size %} adapt-to-image-{{third_img_string}}{% else %} ratio-4x3{% endif %}">
                                <img width="auto" height="auto" loading="lazy" class="h-100 w-100 object-fit-cover img-fluid" src="{{ third_img | img_url: 'master' }}" alt="{{ third_img.alt }}">
                              </div>  
                              {% else %}
                                <div class="ratio ratio-4x3">
                                  {{ 'collection-1' | placeholder_svg_tag: 'placeholder-svg h-100 w-100' }}
                                </div>
                              {% endif %}
                            {% comment %}主题配置中配置的图片链接与三级导航栏链接不相同 或 没配置图片链接，显示占位符{% endcomment %}
                            {% else %}
                              <div class="ratio ratio-4x3">
                                {{ 'collection-1' | placeholder_svg_tag: 'placeholder-svg h-100 w-100' }}
                              </div>
                            {% endif %}
                          </figure>
                          <div class="third-menu-text">
                            <div class="third-menu-title">{{ third_link.title }}</div>
                            {% if is_mega_nenu %}
                              <div class="third-menu-desp">{{ third_desp }}</div>
                            {% endif %}
                          </div>
                        </div>
                      </div>
                    {% endfor %}
                  </div>
                </div>
              </div>
            {% endif %}
          {% endfor %}
          </div>
        </div>
      {%- comment -%} 未配置三级图片   文本模式 {%- endcomment -%}
      {% else %}
      
        {%- assign submenu = link.links -%}
        <div data-111="111" aria-labelledby="dropdownMenuLink{{ forloop.index }}" class="111111 as-dropdown-menu border-0 py-0 dropdown-menu {{ background_color }} overflow-hidden dropdown-menu-center">
          <ul class="second-menu-wrapper-only-text">
            {% for sublink in submenu %}
              {% comment %}（二级导航栏）内没三级，紧遍历二级导航栏标题{% endcomment %}
              {% if sublink.levels == 0 %}
              <li>
                <a {% render 'link', link: sublink.url %} class="dropdown-item" href="{{ sublink.url }}" >{{ sublink.title }}</a>
              </li>
              {% comment %}（二级导航栏）内有三级，遍历二级导航栏标题{% endcomment %}
              {% elsif sublink.levels >= 1 %}
              <li>
                <div class="as-sub-dropdown sub-dropdown sub-nav-item{% if forloop.first == true %} sub-dropdown-of-first{% endif %}">
                  <a class="dropdown-item as-sub-nav-link sub-nav-link sub-dropdown-toggle d-flex cursor-pointer">
                    <span class="sub-dropdown-text flex-grow-1">{{ sublink.title }}</span>
                    <span class="sub-dropdown-icon float-end align-self-center">{% render 'icon-chevron-down-header' %}</span>             
                  </a>
                  <ul class="as-sub-dropdown-menu sub-dropdown-menu hide-sub-dropdown-menu third-menu-wrapper-only-text">
                    {% comment %}遍历三级级导航栏标题{% endcomment %}
                    {% for thirdmenu in sublink.links %}
                      <li><a {% render 'link', link: thirdmenu.url %} class="sub-dropdown-item" href="{{ thirdmenu.url }}" >{{ thirdmenu.title }}</a></li>
                    {% endfor %}
                  </ul>
                </div>
              </li>
              {% endif %}
            {% endfor %}
          </ul>
        </div>
      {% endif %}
    {% comment %}没配置图片链接 或 配置的图片链接与三级导航栏不相同  文本模式{% endcomment %}
    {% else %}
      {%- assign submenu = link.links -%}
      <div data-111="111" aria-labelledby="dropdownMenuLink{{ forloop.index }}" class="no-pic-link-text as-dropdown-menu mega-menu-dropdown border-0 py-0 dropdown-menu {{ background_color }} overflow-hidden dropdown-menu-center end-0 start-0">
        {% comment %} 移动端 {% endcomment %}
        <ul class="d-lg-none d-flex content-wrapper py-lg-5 py-3 pt-0 row px-0 mx-0 justify-content-center">
          {% for sublink in submenu %}

            {% assign firstCharacter = sublink.title | slice: 0, 1 %}
            {% assign lastCharacter = sublink.title | slice: -1, 1 %}
            {% assign isSignLink = true %}
            {% if firstCharacter == '#' and lastCharacter == '#' %}
              {% assign isSignLink = false %}
            {% endif %} 

            {% comment %}（二级导航栏）内没三级，紧遍历二级导航栏标题{% endcomment %}
            {% if sublink.levels == 0 and isSignLink == true %}
            <li class="px-0">
              <a {% render 'link', link: sublink.url %} class="dropdown-item px-0 py-2" href="{{ sublink.url }}" >{{ sublink.title }}</a>
            </li>
            {% comment %}（二级导航栏内）有三级，遍历二级导航栏标题{% endcomment %}
            {% elsif sublink.levels >= 1 %}
            <li class="px-0">
              <div class="as-sub-dropdown sub-dropdown sub-nav-item{% if forloop.first == true %} sub-dropdown-of-first{% endif %}">
                <a class="dropdown-item as-sub-nav-link px-0 py-2  {% if forloop.first == true %} pt-0 {% endif %} {% if forloop.last == true %} pb-0 {% endif %} sub-nav-link sub-dropdown-toggle d-flex cursor-pointer">
                  <span class="sub-dropdown-text flex-grow-1">{{ sublink.title }}</span>
                  <span class="sub-dropdown-icon float-end align-self-center">{% render 'icon-chevron-down-header' %}</span>             
                </a>
                <ul class="as-sub-dropdown-menu px-4 sub-dropdown-menu hide-sub-dropdown-menu third-menu-wrapper-only-text">
                  {% comment %}遍历三级级导航栏标题{% endcomment %}
                  {% for thirdmenu in sublink.links %}

                    <li><a {% render 'link', link: thirdmenu.url %} class="sub-dropdown-item" href="{{ thirdmenu.url }}" >{{ thirdmenu.title }}</a></li>
                  {% endfor %}
                </ul>
              </div>
            </li>
            {% endif %}
          {% endfor %}
        </ul>
        {% comment %} pc端 {% endcomment %}
        <div class="container d-lg-block d-none">
          <ul class="d-flex content-wrapper py-lg-5 py-3 gy-lg-4 pt-0 row px-0 mx-0 justify-content-center">
            {% for sublink in submenu %}
              {% comment %}（二级导航栏）内没三级，紧遍历二级导航栏标题{% endcomment %}
              {% assign firstCharacter = sublink.title | slice: 0, 1 %}
              {% assign lastCharacter = sublink.title | slice: -1, 1 %}
              {% assign isSignLink = true %}
              {% if firstCharacter == '#' and lastCharacter == '#' %}
                {% assign isSignLink = false %}
              {% endif %} 

              {% if sublink.levels == 0 and isSignLink == true %}
                <li class="col-2">
                  <a {% render 'link', link: sublink.url %} class="dropdown-item px-0 py-0" href="{{ sublink.url }}" >{{ sublink.title }}</a>
                </li>
              {% comment %}（二级导航栏内）有三级，遍历二级导航栏标题{% endcomment %}
              {% elsif sublink.levels >= 1 %}
              <li class="col-2 {% if forloop.first %} ps-0 {% endif %} {% if forloop.last %} pe-0 {% endif %}">
                <div class="item content-item">
                  <a class="sub-nav-link sub-dropdown-toggle d-flex text-decoration-none">
                    <span class="sub-dropdown-text flex-grow-1 gray-600 fs-footnote pb-2">{{ sublink.title }}</span>
                  </a>
                  <ul class="px-0">
                    {% comment %}遍历三级级导航栏标题{% endcomment %}
                    {% for thirdmenu in sublink.links %}
                      <li><a {% render 'link', link: thirdmenu.url %} class="pb-0 pt-2 dropdown-item px-0" href="{{ thirdmenu.url }}" >{{ thirdmenu.title }}</a></li>
                    {% endfor %}
                  </ul>
                <div>
              </li>
              {% endif %}
            {% endfor %}
          </ul>
        </div>

        {% render 'header-view-all-btn' submenu: submenu %}
      </div>
    {% endif %}
  {%- comment -%}（ 一级导航栏）没三级导航 文本模式 {%- endcomment -%}
  {% else %}
    {%- assign submenu = link.links -%}
    <div data-222="222" aria-labelledby="dropdownMenuLink{{ forloop.index }}" class="3333333 as-dropdown-menu border-0 py-0 dropdown-menu {{ background_color }} overflow-hidden dropdown-menu-center dropdown-menu-center end-0 start-0" >
      <div class="container d-lg-block d-none">
        <ul class="second-menu-wrapper-only-text d-lg-flex justify-content-lg-center flex-wrap pt-lg-5 pb-lg-0 px-0">
          {% for sublink in submenu %}
            {% assign firstCharacter = sublink.title | slice: 0, 1 %}
            {% assign lastCharacter = sublink.title | slice: -1, 1 %}
            {% assign isSignLink = true %}
            {% if firstCharacter == '#' and lastCharacter == '#' %}
              {% assign isSignLink = false %}
            {% endif %} 
            {% if isSignLink != false %}
              {% comment %}遍历二级导航栏标题{% endcomment %}
              <li class="px-lg-5 pb-lg-5 {% if forloop.last %} pe-lg-0 {% endif %} {% if forloop.first %} ps-lg-0 {% endif %}">
                <a {% render 'link', link: sublink.url %} class="dropdown-item py-lg-0 py-2 px-0 {% if forloop.last %} pb-0 {% endif %} {% if forloop.first %} pt-0 {% endif %}" href="{{ sublink.url }}" >{{ sublink.title }}</a>
              </li>
            {% endif %}
          {% endfor %}
        </ul>
      </div>
      <div class="d-lg-none d-block">
        <ul class="second-menu-wrapper-only-text d-lg-flex justify-content-lg-center flex-wrap pt-lg-5 pb-lg-0 px-0">
          {% for sublink in submenu %}
            {% assign firstCharacter = sublink.title | slice: 0, 1 %}
            {% assign lastCharacter = sublink.title | slice: -1, 1 %}
            {% assign isSignLink = true %}
            {% if firstCharacter == '#' and lastCharacter == '#' %}
              {% assign isSignLink = false %}
            {% endif %} 
            {% if isSignLink != false %}
              {% comment %}遍历二级导航栏标题{% endcomment %}
              <li class="px-lg-5 pb-lg-5 {% if forloop.last %} pe-lg-0 {% endif %} {% if forloop.first %} ps-lg-0 {% endif %}">
                <a {% render 'link', link: sublink.url %} class="dropdown-item py-lg-0 py-2 px-0 {% if forloop.last %} pb-0 {% endif %} {% if forloop.first %} pt-0 {% endif %}" href="{{ sublink.url }}" >{{ sublink.title }}</a>
              </li>
            {% endif %}
          {% endfor %}
        </ul>
      </div>
      {% render 'header-view-all-btn' submenu: submenu %}
    </div>
  {% endif %}
{% endif %}